<template>
  <LxyBox title="基础平台">
    <div class="basic-platform">
      <div class="data">
        <div class="col-line"></div>
        <div class="row-line"></div>

        <div class="row">
          <div class="col-wrap">
            <div class="col">
              <div class="img">
                <img
                  src="@/assets/bigscreen3/icon_leijipv.png"
                  alt=""
                  class="ic"
                />
              </div>
              <count-to
                class="val"
                :startVal="0"
                :endVal="pv"
                :duration="1000"
              ></count-to>
              <p class="key">平台累计PV量(人次)</p>
            </div>
          </div>

          <div class="col-wrap">
            <div class="col">
              <div class="img">
                <img
                  src="@/assets/bigscreen3/icon_zhuceyonghu.png"
                  alt=""
                  class="ic"
                />
              </div>
              <count-to
                class="val"
                :startVal="0"
                :endVal="userCount"
                :duration="1000"
              ></count-to>
              <p class="key">注册用户数(个)</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-wrap">
            <div class="col">
              <div class="img">
                <img
                  src="@/assets/bigscreen3/icon_renzhengqiyejia.png"
                  alt=""
                  class="ic"
                />
              </div>
              <count-to
                class="val"
                :startVal="0"
                :endVal="compCount"
                :duration="1000"
              ></count-to>
              <p class="key">认证企业数(家)</p>
            </div>
          </div>

          <div class="col-wrap">
            <div class="col">
              <div class="img">
                <img
                  src="@/assets/bigscreen3/icon_xiaochengxu.png"
                  alt=""
                  class="ic"
                />
              </div>
              <count-to
                class="val"
                :startVal="0"
                :endVal="studentCount"
                :duration="1000"
              ></count-to>
              <p class="key">小程序用户数(个)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </LxyBox>
</template>

<script setup>
import LxyBox from "./lxyBox";
import { ajax } from "@/store/service";
import { ref, onMounted } from "vue";
import CountTo from "@/components/vueCountTo/vue-countTo.vue";

const pv = ref(0);
const compCount = ref(0);
const userCount = ref(0);
const studentCount = ref(0);

const init = async () => {
  const [res] = await ajax.basePlatform();
  pv.value=res.pv
  compCount.value=res.compCount
  userCount.value=res.userCount
  studentCount.value=res.studentCount
};

onMounted(() => {
  init();
});

</script>

<style scoped lang='scss'>
.basic-platform {
  height: vh(333);
  .data {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    .row {
      flex: 1;
      display: flex;
      flex-direction: column;
      .col-wrap {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .col {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .img {
            margin-bottom: vh(12);
            display: flex;
            justify-content: center;

            .ic {
              height: vh(54);
            }
          }

          .val {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: vh(26);
            color: #ffffff;
            line-height: vh(26);
            text-align: left;
            font-style: normal;
            margin-bottom: vh(8);
          }
          .key {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-size: vh(14);
            color: #ffffff;
            line-height: vh(21);
            text-align: left;
            font-style: normal;
            opacity: 0.8;
            text-align: center;
          }
        }
      }
    }
    .row-line {
      width: vw(472);
      height: 1px;
      border-top: 1px solid;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-image: linear-gradient(
          270deg,
          rgba(200, 200, 200, 0),
          rgba(245, 245, 245, 0.3),
          rgba(151, 151, 151, 0)
        )
        1 1;
    }
    .col-line {
      width: 1px;
      height: vh(290);
      border-left: 1px solid;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-image: linear-gradient(
          180deg,
          rgba(200, 200, 200, 0),
          rgba(245, 245, 245, 0.3),
          rgba(151, 151, 151, 0)
        )
        1 1;
    }
  }
}
</style>